<template>
  <div>
    <ul class="leader-ul" v-if="approveList.length">
      <li class="leader-li" v-for="item in approveList" :key="item.id">
        <div class="header">
          <span class="name">{{ item.instruByName }} (批示)</span>
          <span class="time">{{ item.instruTime }}</span>
        </div>
        <div class="cont">{{ item.instruContent }}</div>
      </li>
    </ul>
    <van-empty description="暂无数据" v-else />
  </div>
</template>
<script>
import { instruList } from '@api/api-task.js'
export default {
  name: 'LeaderApprove',
  props: {
    // 详情
    detailsData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      id: '',
      approveList: [], // 领导批示列表
    }
  },
  computed: {},
  watch: {
    detailsData: {
      handler(obj) {
        if (obj.id) {
          this.id = obj.id
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initdata() {
      instruList({
        taskId: this.id,
      }).then(res => {
        const { data = [], code = 0 } = res || {}
        if (code === 0) {
          this.approveList = data
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.leader-ul {
  .leader-li {
    margin: 0 px2rem(20) px2rem(20);
    background: #fff;
    font-size: $fontSize30;
    padding: px2rem(20);
    .header {
      display: flex;
      justify-content: space-between;
      padding: px2rem(20) 0;
      border-bottom: 1px solid #eee;
      .name {
        font-weight: 600;
      }
      .time {
        color: #999;
      }
    }
    .cont {
      text-align: justify;
      padding: px2rem(20) 0;
      word-break: break-all;
    }
    .unit {
      border-top: 1px solid #eee;
      // color: #a85252;
      color: #e87c6e;
      font-size: $fontSize28;
      padding-top: px2rem(20);
    }
  }
}
</style>
